<template>
	<view >

	<wTitleBar title="轻松易挪" textColor="#fff" bgColor="none" textAlign="center"></wTitleBar>
	 <view class="content"> 
		 <view class="headimg">
			 <image src="../../static/index_head.png"></image>
		 </view>
		 <view v-if="showCarNumber" class="chooseCar">
		 	<plate @listenPlateChange="plateChange" :defaultPlate="plateNumber" />	
		 </view>
		 <view @click="hideCar()" v-if="showCarNumber == false" class="chepai">
			 <view style="float: left; margin-top: 20rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>
			 <view style="float: left;margin-left: -10rpx; margin-top: 90rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>
			 <view style="float: right;margin-left: 20rpx; margin-top: 20rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>
			 <view style="float: right;margin-right: -30rpx; margin-top: 90rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>
		 	点击添加车牌号
		 </view>
		 <view class="fenge">
		 	 <u-line color="#33b558" border-style="dashed" hair-line="false"></u-line>
		 </view> 
		 <view class="toast">
			<u-form-item label-width=110 label="手机号"><u-input type="number" v-model="phone" /></u-form-item>
				<view class="smscode">
					<u-form-item border-bottom="false" class="code_input" label-width=110 label="验证码"><u-input v-model="code" /></u-form-item>
					<u-button @click="sendsms()" class="send_code" size="mini" plain type="success">发送验证码</u-button>
				</view>
			<u-button @click="bandCardId()"  type="success">绑定</u-button>
			
		</view>
		 <view class="fenge">
		 	 <u-line color="#33b558" border-style="dashed" hair-line="false"></u-line>
		 </view> 
		 <view class="buy">
		 	<view class="avatar">
		 		<image class="buy_avatar" src="../../static/t1.jpeg" mode=""></image>
				<image class="buy_avatar" style="left: -20rpx;" src="../../static/t2.jpeg" mode=""></image>
				<image class="buy_avatar" style="left: -40rpx;" src="../../static/t3.jpeg" mode=""></image>
				<image class="buy_avatar" style="left: -60rpx;" src="../../static/t4.jpeg" mode=""></image>
		 	</view>
			<view class="buy_tit">
				2.3W人人已经申请同款挪车码
			</view>
		 </view>
	 </view>	
	 <view class="middle">
	 	<view class="mid_list">
	 		<view class="list_tit">
	 			隐私保护
	 		</view>
			<view class="list_sec">
				双向匿名拨打电话信息无泄漏
			</view>
			<image src="../../static/safe.png" mode=""></image>
	 	</view>
		<view class="mid_list">
			<view class="list_tit">
				多种方式
			</view>
			<view class="list_sec">
				电话短信多通道通知挪车人
			</view>
			<image src="../../static/td.png" mode=""></image>
		</view>
	 </view>
	 <view class="home" @click="toHome">
	 	<image src="../../static/home.png" mode=""></image>
		<view class="home_tit">
			我的
		</view>
	 </view>
	 <view class="footer">本服务由 致一网络科技工作室 提供</view>
	 <u-toast ref="uToast" />
	</view>
		

</template>

<script>
	import wTitleBar from '../../components/w-titleBar/w-titleBar.vue'
	import plate from '../../components/plate/index.vue'
	export default {
		components: {
		            plate,wTitleBar
		        },
		data() {
			return {
				showCarNumber:false,
				plateNumber:[],
				phone:'',
				code:'',
				cardid:'',
				sendAgain:true
			}
		},
		onLoad(data) {
			if(!data.cardid){
				this.$refs.uToast.show({
					title: '页面不包含任何绑定码,请联系开发者',
					type: 'error',
					duration:3000
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'../home/home'
					})
				},3000)
				return;
			}
			this.cardid=data.cardid;
			this.isLogin();
		},
		onShow(){
			if(!this.cardid){
				this.$refs.uToast.show({
					title: '页面不包含任何绑定码,请联系开发者',
					type: 'error',
					duration:3000
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'../home/home'
					})
				},3000)
				return;
			}
		},
		methods: {
			toHome(){
				uni.navigateTo({
					url:'../home/home'
				})
			},
			hideCar(){
				this.showCarNumber=true
			},
			isLogin(){
				const openid=uni.getStorageSync('openid');
				if(!openid){
					this.$refs.uToast.show({
						title: '即将跳转去登录页，成功后返回本页面绑定',
						type: 'warning',
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'../home/home?retband=1'
						})
					},2000)
				}
			},
			sendsms(){
				const phone=this.phone;
				if(!phone){
					this.$refs.uToast.show({
						title: '请先输入电话号',
						type: 'error',
					})
					return;
				}
				if(!this.sendAgain){
					this.$refs.uToast.show({
						title: '请在60秒后再次发送',
						type: 'error',
					})
					return;
				}
				uni.request({
					url:this.$config.baseApi+'common/sendcode',
					data:{phone},
					method:'POST',
					dataType:'json',
					success: (resData) => {
						const res=resData.data;
						if(!res.code){
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								duration:3000
							})
							return;
						}
						this.sendAgain=false;
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						})
						setTimeout(()=>{
							this.sendAgain=true
						},60000)
						
					}
				})
			},
			plateChange(number){
				this.plateNumber=number;
			},
			bandCardId(){
				var carnumber="";
				this.plateNumber.map((el,index)=>{
					if(index==2){
						carnumber=carnumber+"·"+el
					}else{
						carnumber+=el
					}
					
				});
				if(!carnumber){
					this.$refs.uToast.show({
						title: '车牌号为空，请点击添加',
						type: 'error',
					})
					return;
				}
				const openid=uni.getStorageSync('openid');
				if(!openid){
					this.isLogin();
					return;
				}
				const phone=this.phone;
				const code=this.code;
				const cardid=this.cardid;
				if(!phone || !code){
					this.$refs.uToast.show({
						title: '电话号或者验证码为空',
						type: 'error',
					})
					return;
				}
				uni.request({
					url:this.$config.baseApi+'card/bandcard',
					data:{openid,phone,code,carnumber,cardid},
					method:'POST',
					dataType:'json',
					success: (resData) => {
						const bandres=resData.data;
						if(!bandres.code){
							this.$refs.uToast.show({
								title: bandres.msg,
								type: 'error',
							})
							return;
						}
						this.$refs.uToast.show({
							title: bandres.msg,
							type: 'success',
							duration:3000
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'../home/home'
							})
						},3000)
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: -webkit-linear-gradient(top,rgb(4 181 244),#56f5df,white);
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 95%;
		margin: auto;
		border-radius: 10rpx;
		background-color: white;
	}
	.headimg{
		width: 100%;
		margin-top: 20rpx;
		height: 80rpx;
		background-color: white;
		margin-bottom: 40rpx;
	}
	.headimg image{
		width: 100%;
		height: 80rpx;
	}
	.chepai{
		background-color: #2196F3;
		text-align: center;
		font-size: 60rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 6rpx;
		color: white;
		letter-spacing: 10rpx;
		line-height: 120rpx;
		height: 120rpx;
		min-width: 400rpx;
	}

	.toast{
		width: 70%;
		margin: auto;
		margin-top: 20rpx;

	}
	.input_list{
		width: 100%;
	}
	.smscode{
		width: 100%;
		display: flex;
	}
	.code_input{
		
	}
	.send_code{
		width: 180rpx;
		margin-top: 26rpx;
	}
	.fenge{
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		
		
	}
	.buy{
		display: flex;
		height:80rpx ;
		
	}
	.avatar{
		width: 240rpx;
	}
	.buy_avatar{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		position: relative;
	}
	.buy_tit{
		color: #999;
		font-size: 26rpx;
		line-height: 60rpx;
		text-align: left;
		flex: 1;
	}
	
	
	.middle{
		width: 90%;
		margin: auto;
		margin-top: 40rpx;
		
	}
	.middle .mid_list{
		display: flex;
		height: 120rpx;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx短信 (1).png;
	}
	.mid_list .list_tit {
		font-size: 40rpx;
		margin-right: 20rpx;
		color: #007AFF;
		font-weight:bold;
	}
	.mid_list .list_sec{
		flex: 2;
		color: #999;
		font-size: 25rpx;
	}
	.mid_list image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 40rpx;
		float: right;
	}
	.home{
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		position: fixed;
		bottom: 80rpx;
		right: 36rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #007AFF;
		border-radius: 50rpx;
	}
	.home image{
		width: 60rpx;
		height: 60rpx;
	}
	.home .home_tit{
		font-size: 22rpx;
		color: white;
	}
	
	
	.footer{
		width: 100%;
		position: fixed;
		bottom: 10rpx;
		color: #607D8B;
		text-align: center;
	}
</style>
